<template>
  <div>
    <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" style="border-bottom: 1px solid #ccc" />
    <Editor :defaultConfig="editorConfig" :mode="mode" v-model="valueHtml" style="height: 400px; overflow-y: hidden"
      @onCreated="handleCreated" @onChange="handleChange" />
  </div>
</template>
 
<script setup>
import { ref, inject, reactive, onBeforeUnmount, shallowRef, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

const router = useRouter()
const route = useRoute()
const axios = inject('axios')

components: { Editor, Toolbar }

// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef()

const toolbarConfig = { excludeKeys: ['uploadVideo'] }

const mode = 'default'

const editorConfig = { placeholder: '请输入内容...' };

let valueHtml = ref('')

// 上传图片
editorConfig.MENU_CONF = {}
editorConfig.MENU_CONF['uploadImage'] = {
  // 小于该值就插入 base64 格式（而不上传），默认为 0
  base64LimitSize: 10 * 1024, // 10kb
  server: 'http://localhost:8080/upload/up',
}
editorConfig.MENU_CONF['insertImage'] = {
  parseImageSrc: (src) => {
    if (src.indexOf('http') !== 0) {
      return `http://localhost:8080${src}`
    }
    return src
  }
}


const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:model-value'])
let initFinished = false
onMounted(() => {
  setTimeout(() => {
    valueHtml.value = props.modelValue;
    initFinished = true
  }, 10)
})

// 组件销毁时，也及时销毁编辑器，重要！
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

// 编辑器回调函数
const handleCreated = (editor) => {
  console.log('created', editor);
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const handleChange = (editor) => {
  if (initFinished) {
    emit('update:model-value', valueHtml.value)
  }
};

</script>
 
<style lang='less' scoped>

</style>